<template>
  <!--<view class="flex flex-col h-screen">-->

      <view class="revenueBg h-44 relative flex flex-col">
        <view class="mt-5 text-center text-white text-lg">今日营收</view>
        <view class="text-center text-white text-lg">{{ revenueInfo.today }}</view>

        <view class="flex h-16 mt-auto">
          <view class="flex-1">
            <view class="text-center text-ls text-white">昨日营收</view>
            <view class="text-center text-lg text-white">{{ revenueInfo.yesterday }}</view>
          </view>
          <view class="flex-1">
            <view class="text-center text-ls text-white">营收总额</view>
            <view class="text-center text-lg text-white">{{ revenueInfo.total }}</view>
          </view>
        </view>
      </view>

      <view class="flex h-10">
        <view :class="tabSelect == 1 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(1)">营收统计</view>
        <view :class="tabSelect == 2 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(2)">营收明细</view>
        <!--<view :class="tabSelect == 3 ? 'tabAct' : ''" class="flex-1 text-sm text-slate-600 h-full flex items-center justify-center" @click="changTab(3)">退款明细</view>-->
      </view>

      <!--营收统计 :dataSource="dataList"-->
      <List v-if="tabSelect == 1"
            ref="statsRef"
            :dataSource="statsList"
            :screenList="statList"
            :dropDownMenuList="statMenuList"
            @selectedTerm="selectedStatTerm" @scrollBottom="scrollBottom(1)">
        <template v-slot:mainList="scope">
            <view class="px-4">
              <view class="border-bottom flex py-3">
                <view class="flex-1 text-sm text-slate-600">{{ scope.date }}</view>
                <view class="flex-1 flex items-center justify-center text-sm text-slate-600">￥{{ scope.total }}</view>
                <view class="flex-1 flex items-center justify-center text-sm text-slate-600">￥{{ scope.number }}</view>
              </view>
            </view>
        </template>
      </List>

      <!--营收明细-->
      <List v-if="tabSelect == 2"
            ref="mxRef"
            :dataSource="mxDataList"
            :screenList="detailList"
            :dropDownMenuList="detailMenuList"
            @selectedTerm="selectedDetailTerm" @scrollBottom="scrollBottom(2)">
        <template v-slot:mainList="scope">
          <view class="px-4" @click="jumpDetail(scope.id)">
            <view class="flex justify-between py-3 border-bottom">
              <view>
                <view class="text-slate-600 text-sm">充值金币：{{ scope.pay_price }}元</view>
                <view class="text-slate-600 text-xs">{{ scope.order_id }}</view>
              </view>
              <view>
                <view class="text-slate-600 text-sm text-red-500 text-right">{{ scope.number }}元</view>
                <view class="text-slate-600 text-xs text-right">{{ moment(scope.add_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</view>
              </view>
            </view>
          </view>
        </template>
        <template v-slot:after-sift>
          <view class="py-3" v-if="detailType == 3">
            <uni-datetime-picker type="daterange" v-model="customTime" :clear-icon="false" @change="customChange"></uni-datetime-picker>
          </view>

        </template>
      </List>
  <!--</view>-->
</template>

<script setup lang="ts">
  import moment from 'moment'
  import { ref, reactive, onMounted } from 'vue'
  import { userRevenueStatsInfoApi, userRevenueStatApi, userMxListApi } from '@/api/revenue'
  import List from './components/list.vue'

  onMounted(() => {
    getHeadInfo()
    getStatsList()
  })

  const revenueInfo = reactive({
    today: '',
    total: '',
    yesterday: ''
  })
  const getHeadInfo = async () => {
    const res = await userRevenueStatsInfoApi()
    revenueInfo.today = res.data.today
    revenueInfo.total = res.data.total
    revenueInfo.yesterday = res.data.yesterday
  }

  const pageQuery = ref({
    page: 1,
    limit: 10
  })
  const total = ref<number>(0)

  /** tab切换 **/
  const tabSelect = ref(1)
  const changTab = (type: number) => {
    tabSelect.value = type
    statsList.value = []
    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    type == 1 ? getStatsList() : getMxList()
  }

  /** 获取营收统计 **/
  const statsType = ref(10) // 10 本月, 20 按月
  const statsList = ref<object[]>([])
  const getStatsList = async() => {
    if(statsType.value == 10 ) {
      const res = await userRevenueStatApi({ ...{ page: 1, limit: 50, },...{ type: statsType.value } })
      statsList.value = res.data
    }else {
      const res = await userRevenueStatApi({ ...pageQuery.value,...{ type: statsType.value } })
      statsList.value = [...statsList.value, ...res.data.data]
      total.value = res.data.total
    }

  }

  /** 获取营收明细 **/
  const mxDataList = ref<object[]>([])
  const start = ref<string>('') // 开始时间
  const end = ref<string>('') // 结束时间
  const detailType = ref(0)
  const payType = ref('')

  const getMxList = async() => {
    const res = await userMxListApi({ ...pageQuery.value, ...{type: detailType.value, start: start.value, end: end.value, pay_type: payType.value } })
    mxDataList.value = [...mxDataList.value , ...res.data.data]
    total.value = res.data.total
  }

  /** 滚动底部 **/
  const scrollBottom = (type) => {
    // type 1: 营收统计, 2: 营收明细
    if(type == 1 && statsType.value == 20) {
        if(statsList.value.length < total.value) {
          pageQuery.value.page += 1
          getStatsList()
        }
    } else {
      if(mxDataList.value.length < total.value) {
        pageQuery.value.page += 1
        getMxList()
      }
    }

  }

  /** 营收统计 **/
  const statList = reactive([
    {
      name: '本月',
      key: 'date',
      className: 'flex-1 flex items-center justify-left text-slate-600 text-sm',
      type: 'select'
    },
    { name: '营收', className: 'flex-1 flex items-center justify-center text-slate-600 text-sm' },
    { name: '分成', className: 'flex-1  flex items-center justify-center text-slate-600 text-sm' },
  ])

  const statMenuList = reactive({
    date: [{ menuName: '本月', value: 10 }, { menuName: '往月', value: 20 }]
  })

  const statsRef = ref()
  const selectedStatTerm = (screenTar) => {
    const index = statList.findIndex(item => {
      return item.key == screenTar.menuKey
    })
    // console.log(screenTar)
    statsType.value = screenTar.value
    statsList.value = []
    pageQuery.value.page = 1
    total.value = 0
    statsRef.value.closeDrop()
    getStatsList()
    statList[index].name = screenTar.menuName
  }

  /** 营收明细 **/
  const detailList = reactive([
    {
      name: '今日',
      key: 'date',
      className: 'flex-1 flex items-center justify-left text-slate-600 text-sm',
      type: 'select'
    },
    {
      name: '全部支付方式',
      key: 'payment',
      className: 'flex-1 flex items-center justify-end text-slate-600 text-sm',
      type: 'select'
    }
  ])
  const detailMenuList = reactive({
    // menuName: '自定义日期', value: 3
    date: [
      { menuName: '今日', value: 0 },
      { menuName: '7日', value: 1 },
      { menuName: '30日', value: 2 },
      { menuName: '自定义日期', value: 3, slotName: 'after-sift' }
    ],
    payment: [
      { menuName: '全部支付方式', value: '' },
      { menuName: ' weixin', value: ' weixin' },
      { menuName: 'alipay', value: 'alipay' },
      { menuName: 'alipay_h5', value: 'alipay_h5' },
      { menuName: 'douyin', value: 'douyin' },
      { menuName: 'ios', value: 'ios' },
    ]
  })

  /** 自定义时间 **/
  const customTime = ref([])
  const customChange = () => {
    start.value = customTime.value[0]
    end.value = customTime.value[1]

    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0

    mxRef.value.closeDrop()
    getMxList()
  }
  const mxRef = ref()

  const selectedDetailTerm = (screenTar) => {
    const index = detailList.findIndex(item => {
      return item.key == screenTar.menuKey
    })
    // console.log('screenTar===', screenTar)

    if(screenTar.menuKey == 'date') {
      detailType.value = screenTar.value
    }else if (screenTar.menuKey == 'payment') {
      payType.value = screenTar.value
    }

    mxDataList.value = []
    pageQuery.value.page = 1
    total.value = 0
    detailList[index].name = screenTar.menuName

    if(screenTar.value == 3) {
      return
    }else {
      mxRef.value.closeDrop()
    }
    getMxList()

  }

  const jumpDetail = (id) => {
    uni.navigateTo({ url: '/pages/mine/revenueDetail?id=' + id })
  }

</script>

<style scoped lang="scss">
.revenueBg {
  background: url("@/static/image/revenueBg.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}

.tabAct {
  border-bottom: 2rpx solid #2563eb;
  color: #2563eb;
}

</style>
